<template>
  <view class="page">
    <view class="container">

      <!-- 悬浮框部分 -->
      <view class="floating-box">
        <!-- 医生头像 -->
        <image class="doctor-avatar" src="/static/doctor.png"/>

        <view class="doctor-info">
          <!-- 第一行：姓名、职位、预约数量 -->
          <view class="info-row">
            <text class="doctor-name">{{ doctorInfo.name }}</text>
            <text class="doctor-title">{{ doctorInfo.title }}</text>
          </view>

          <!-- 第二行：医院、科室 -->
          <view class="info-row">
            <text class="doctor-hospital">{{ doctorInfo.hospital }}</text>
            <text class="doctor-department">{{ doctorInfo.department }}</text>
          </view>

        </view>
      </view>
      <!-- 挂号信息 -->
      <view class="registration-section">
        <!-- 第一行：医院名称 -->
        <text class="hospital-name">{{ registrationInfo.hospital }}</text>

        <!-- 第二行：门诊名称 -->
        <text class="department-name">{{ registrationInfo.department }}</text>

        <!-- 第三行：价格 -->
        <text class="price-info">到诊价：￥{{ registrationInfo.price }}</text>

        <!-- 挂号时间按钮 -->
        <view class="time-slots">
          <view
              v-for="(slot, index) in registrationInfo.times"
              :key="index"
              class="time-slot"
              :class="slot.status === '预约' ? 'active' : 'disabled'"
              @click="slot.status === '预约' ? navigateToRegister(slot.date, slot.time) : null"
          >
            <text>{{ slot.date }}</text>
            <text>{{ slot.time }}</text>
            <text>{{ slot.status }}</text>
          </view>
        </view>
      </view>

      <!-- 医生简介悬浮窗 -->
      <view class="floating-intro">
        <view class="intro-header">
          <text class="doctor-name">{{ doctorInfo.name }}</text>
          <text class="doctor-title">{{ doctorInfo.title }}</text>
        </view>
        <text class="doctor-hospital">{{ doctorInfo.hospital }}</text>
        <text class="doctor-introduction">{{ doctorInfo.introduction }}</text>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      doctorId: '',
      hospitalId:0,
      // 🆕 医生信息
      doctorInfo: {
        name: '',
        title: '',
        hospital: '',
        department: '',
        introduction: '',
      },
      // 🆕 挂号信息
      registrationInfo: {
        hospital: '北京协和医院',
        department: '特需皮肤科门诊',
        price: 500,
        times: [
          {date: '03/01', time: '周日 上午', status: '停诊'},
          {date: '03/08', time: '周日 上午', status: '停诊'},
          {date: '03/15', time: '周日 上午', status: '停诊'},
          {date: '03/22', time: '周日 上午', status: '预约'},
        ],
      },

    };
  },
  onLoad(options) {
    this.doctorId = options.doctorId || '未知';
    this.hospitalId=options.id;
    this.departmentId=options.departmentId;
    console.log("医院id:"+this.hospitalId)
    console.log("医生id"+this.doctorId)
    console.log("科室id"+this.departmentId)
  },
  methods: {
    // 🆕 挂号跳转方法
    navigateToRegister(date, time) {
      uni.navigateTo({
        url: `/pages/registrations/register/register?doctorId=${this.doctorId}&hospitalId=${this.hospitalId}&departmentId=${this.departmentId}&date=${date}&time=${time}`,
      });
    },
    getDoctorInfo() {
      uni.request({
        url: 'http://localhost:8080/app/registration/listDoctorsById/' + this.doctorId,
        method: 'GET',
        success: result => {
          console.log("test", result.data)
          if (result.statusCode == 200) {
            this.doctorInfo = result.data
          }
        }
      })
    },
  },
  created() {
    this.getDoctorInfo()
  }
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20rpx;
}

.container {
  width: 100%;
  padding: 20rpx;
}

/* 🆕 新增代码开始：悬浮框样式 */
.floating-box {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  align-items: center;
}

.doctor-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.doctor-info {
  flex: 1;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.doctor-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.doctor-title {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.appointment-count {
  font-size: 26rpx;
  color: #999;
}

.doctor-hospital,
.doctor-department,
.first-hospital {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}

/* 🆕 新增代码结束 */
/* 🆕 挂号信息样式 */
.registration-section {
  padding: 20rpx;
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

.hospital-name {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.department-name {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 10rpx;
}

.price-info {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 20rpx;
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.time-slot {
  width: 45%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  font-size: 26rpx;
}

.time-slot.disabled {
  background-color: #ccc;
  color: #fff;
}

.time-slot.active {
  background-color: #4caf50;
  color: #fff;
}

/* 🆕 新增代码开始：医生简介悬浮窗样式 */
.floating-intro {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.intro-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.doctor-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.doctor-title {
  font-size: 28rpx;
  color: #666;
}

.doctor-hospital {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 10rpx;
}

.doctor-introduction {
  font-size: 26rpx;
  color: #555;
  line-height: 40rpx;
}

/* 🆕 新增代码结束 */

</style>
